<template>
  <div class="jc-component__range">
    <div class="jc-range" :class="rangeStatus?'success':''" >
        <i @mousedown="rangeMove"  :class="rangeStatus?successIcon:startIcon"></i>
        {{rangeStatus?successText:startText}}
    </div>
  </div>
</template>
<script>
    export default {
        props: {
            // 成功之后的函数
            successFun: {
                type: Function
            },
            // 成功图标
            successIcon: {
                type: String,
                default: 'el-icon-success'
            },
            // 成功文字
            successText: {
                type: String,
                default: '验证成功'
            },
            // 开始的图标
            startIcon: {
                type: String,
                default: 'el-icon-d-arrow-right'
            },
            // 开始的文字
            startText: {
                type: String,
                default: '拖动滑块验证'
            },
            // 失败之后的函数
            errorFun: {
                type: Function
            },
            // 或者用值来进行监听
            status: {
                type: Boolean
            }
        },
        data () {
            return {
                disX: 0,
                event: null,
                rangeStatus: false
            }
        },
        watch: {
            status () {
                // this.reset()
            }
        },
        methods: {
            // 滑块移动
            rangeMove (e) {
                this.event = e
                let ele = e.target
                let startX = e.clientX
                let eleWidth = ele.offsetWidth
                let parentWidth = ele.parentElement.offsetWidth
                let MaxX = parentWidth - eleWidth
                if (this.rangeStatus) { // 不运行
                    return false
                }
                document.onmousemove = (e) => {
                    let endX = e.clientX
                    this.disX = endX - startX
                    if (this.disX <= 0) {
                        this.disX = 0
                    }
                    if (this.disX >= MaxX - eleWidth) { // 减去滑块的宽度,体验效果更好
                        this.disX = MaxX
                    }
                    ele.style.transition = '.1s all'
                    ele.style.transform = 'translateX(' + this.disX + 'px)'
                    e.preventDefault()
                }
                document.onmouseup = () => {
                    if (this.disX !== MaxX) {
                        ele.style.transition = '.5s all'
                        ele.style.transform = 'translateX(0)'
                        // 执行成功的函数
                        this.errorFun && this.errorFun()
                    } else {
                        this.rangeStatus = true
                        if (this.status) {
                            this.$parent[this.status] = true
                        }
                        // 执行成功的函数
                        this.successFun && this.successFun()
                    }
                    document.onmousemove = null
                    document.onmouseup = null
                }
            },
            reset () { // 重置
                if (this.event) {
                    let ele = this.event.target
                    console.log('eleeleeleele---', ele)
                    this.disX = 0
                    ele.style.transition = '.5s all'
                    ele.style.transform = 'translateX(0)'
                    this.rangeStatus = false
                    this.errorFun && this.errorFun()
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
@mixin jc-flex{
	display: flex;
	justify-content: center;
	align-items: center;
}
.jc-component__range{
	.jc-range{
		background-color: #CDCDCD;
		position: relative;
		transition: 1s all;
		user-select: none;
        color: #5294D4;
        font-size:22px;
        @include jc-flex;
        width:360px;
        height: 60px;
        border-radius: 8px;
		&.success{
			background-color: #7AC23C;
			color: #fff;
			i{
				color: #7AC23C;
			}
		}
		i{
            top: 0;
            font-size: 150%;
			position: absolute;
			left: 0;
			width: 55px;/*no*/
			height: 100%;
			color: #fff;
			background-color: #BEBEBE;
			border: 1px solid #bbb;
            cursor: pointer;
            border-radius: 8px;
			@include jc-flex;
		}
	}
}
</style>
